<template>
	<div style="width:100%;">
		<div v-show="!showCamera" class="content">
			<my-step style="margin-top: 20px;width: 100%;" :current="1"></my-step>
			<!--<Steps :current="1" style="margin-top: 30px" size="small">-->
			<!--<Step title="基本信息"></Step>-->
			<!--<Step title="自助提交"></Step>-->
			<!--<Step title="视频聊天"></Step>-->
			<!--<Step title="完成业务"></Step>-->
			<!--</Steps>-->

			<div class="line"></div>
			<div class="item" @click="camera(1)">
				<img :src="image1" class="image" v-show="!idcardfront" />
				<img src="../../static/image/takephoto.png" class="photo" v-show="!idcardfront" />
				<img :src="idcardfront" class="image" v-show="idcardfront" />
				<div class="info">
					<div class="info1">{{ $t('ivcs.uidcardfront') }}</div>
					<div class="info2">{{ $t('ivcs.idcardfrontinfo') }}</div>
				</div>
			</div>

			<div class="item" @click="camera(2)">
				<img :src="image2" class="image" v-show="!idcardback" />
				<img src="../../static/image/takephoto.png" class="photo" v-show="!idcardback" />
				<img :src="idcardback" class="image" v-show="idcardback" />
				<div class="info">
					<div class="info1">{{ $t('ivcs.uidcardback') }}</div>
					<div class="info2">{{ $t('ivcs.idcardbackinfo') }}</div>
				</div>
			</div>

			<div class="item" @click="camera(3)">
				<img :src="image3" class="image" v-show="!bankimg" />
				<img src="../../static/image/takephoto.png" class="photo" v-show="!bankimg" />
				<img :src="bankimg" class="image" v-show="bankimg" />
				<div class="info">
					<div class="info1">{{ $t('ivcs.ubankcard') }}</div>
					<div class="info2" style="width:155px;height: 12px ">{{ $t('ivcs.bankinfo') }}</div>
				</div>
			</div>

			<div class="item" @click="camera(4)">
				<img :src="image4" class="image" v-show="!selfimg" />
				<img src="../../static/image/takephoto.png" class="photo" v-show="!selfimg" />
				<img :src="selfimg" class="image" v-show="selfimg" />
				<div class="info">
					<div class="info1">{{ $t('ivcs.uselfpic') }}</div>
					<div class="info2">{{ $t('ivcs.selfpicinfo') }}</div>
				</div>
			</div>

			<div class="item itemrow">
				<span class="itemtitle">{{ $t('ivcs.address') }}</span>
				<input class="input" :placeholder="addressplacehold" v-model="address" />
			</div>

			<div class="item itemrow">
				<span class="itemtitle">{{ $t('ivcs.companyname') }}</span>
				<input class="input" :placeholder="complacehold" v-model="company" />
			</div>

			<Button class="next" type="primary" @click="next">{{ $t('ivcs.submitvideo') }}</Button>
		</div>

		<camera @sendPic="sendPic" v-if="showCamera" ref="camera" @back="showCamera = false"></camera>
	</div>
</template>

<script>
import { postforminfo } from '../api/api';
import Camera from './Camera';
import image1 from '../../static/image/shenfenzheng1.png';
import image2 from '../../static/image/shenfenzheng2.png';
import image3 from '../../static/image/bank.png';
import image4 from '../../static/image/me.png';
import MyStep from './MyStep';
export default {
	name: 'TakePhoto',
	components: { MyStep, Camera },
	data() {
		return {
			picIndex: 0, //拍摄的图片index 1正 2反 3银行卡 4自拍照
			showCamera: false,
			image1: image1,
			image2: image2,
			image3: image3,
			image4: image4,
			idcardfront: null,
			idcardback: null,
			selfimg: null,
			bankimg: null,
			address: null,
			company: null
		};
	},

	computed: {
		addressplacehold() {
			if (this.address) {
				return '';
			}
			return this.$t('ivcs.addresspl');
		},

		complacehold() {
			if (this.company) {
				return '';
			}
			return this.$t('ivcs.companynamepl');
		}
	},

	mounted() {
		this.selfimg = sessionStorage.getItem('selfimg');
		this.idcardfront = sessionStorage.getItem('idcardFront');
		this.idcardback = sessionStorage.getItem('idcardBack');
		this.bankimg = sessionStorage.getItem('bankImg');
		this.address = sessionStorage.getItem('address');
		this.company = sessionStorage.getItem('company');
	},
	methods: {
		next() {
			if (this.address == null || this.company == null || this.idcardback == null || this.idcardfront == null || this.bankimg == null || this.selfimg == null) {
				this.$Message.error(this.$t('input.perfectInformation'));
			} else if (this.address.length > 512) {
				this.$Message.error(this.$t('input.addressLengthError'));
			} else if (this.company.length > 512) {
				this.$Message.error(this.$t('input.companyLengthError'));
			} else {
				//提交表单信息
				var para = {
					name: sessionStorage.getItem('username'),
					ID: sessionStorage.getItem('idcard'),
					mobile: sessionStorage.getItem('mobile'),
					productCategory: sessionStorage.getItem('category'),
					frontPhoto: this.idcardfront,
					backPhoto: this.idcardback,
					bankCardPhoto: this.bankimg,
					selfie: this.selfimg,
					address: this.address.trim(),
					company: this.company.trim()
				};

				sessionStorage.setItem('company', this.company.trim());
				sessionStorage.setItem('address', this.address.trim());

				var self = this;
				this.$Spin.show({
					render: h => {
						return h('div', [
							h('Icon', {
								class: 'demo-spin-icon-load',
								props: {
									type: 'ios-loading',
									size: 60
								}
							}),
							h('div', { class: 'info' }, '资料提交中...')
						]);
					}
				});
				postforminfo(para)
					.then(function(resp) {
						self.$Spin.hide();
						if (resp.data.code === 200) {
							self.$Message.success(self.$t('input.submitSuccess'));
							self.$store.state.formId = resp.data && resp.data.data && resp.data.data.id;
							localStorage.setItem('userInfoFormId', resp.data.data.id);
							self.$router.push('/start');
						} else {
							self.$Message.error(resp.data.data.message);
						}
					})
					.catch(function(error) {
						self.$Message.error('submit error' + error);
						self.$Spin.hide();
					});
			}
		},
		camera(index) {
			this.showCamera = true;
			this.picIndex = index;
			localStorage.setItem('picType', index);
		},

		sendPic(captureImage) {
			this.showCamera = false;
			if (this.picIndex === 1) {
				this.idcardfront = captureImage;
				sessionStorage.setItem('idcardFront', captureImage);
			} else if (this.picIndex === 2) {
				this.idcardback = captureImage;
				sessionStorage.setItem('idcardBack', captureImage);
			} else if (this.picIndex === 3) {
				this.bankimg = captureImage;
				sessionStorage.setItem('bankImg', captureImage);
			} else if (this.picIndex === 4) {
				this.selfimg = captureImage;
				sessionStorage.setItem('selfimg', captureImage);
			}
		}
	}
};
</script>

<style>
.ivu-spin {
	color: rgba(100, 202, 171, 1);
}
.loading-icon .ivu-icon,
.info {
	padding-top: 10px;
	color: rgba(100, 202, 171, 1);
}

.demo-spin-icon-load {
	animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
	from {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.demo-spin-col {
	height: 100px;
	position: relative;
	border: 1px solid #eee;
}
</style>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.next {
	width: 90%;
	background: rgba(100, 202, 171, 1);
	margin-top: 20px;
	height: 42px;
	margin-bottom: 20px;
	border: 0px;
}

.title {
	width: 216px;
	height: 50px;
	font-size: 20px;
	font-family: PingFangSC;
	font-weight: 600;
	color: rgba(51, 51, 51, 1);
	line-height: 50px;
	margin-top: 20px;
}

.line {
	margin-top: 13px;
	width: 100%;
	height: 7px;
	background: rgba(252, 247, 247, 1);
}

.item {
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: center;
	margin-top: 20px;
	width: 90%;
	position: relative;
}

.info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-content: center;
	margin-left: 15px;
}

.info1 {
	width: 84px;
	height: 17px;
	font-size: 12px;
	font-family: PingFangSC;
	font-weight: 400;
	color: rgba(88, 88, 88, 1);
	line-height: 17px;
	text-align: left;
}

.info2 {
	width: 155px;
	height: 24px;
	font-size: 9px;
	font-family: PingFangSC;
	font-weight: 400;
	color: rgba(153, 153, 153, 1);
	line-height: 12px;
	text-align: left;
}

.image {
	width: 120px;
	height: 80px;
	object-fit: contain;
	/*-webkit-transform:rotate(0deg);*/
}

.photo {
	width: 30px;
	height: 30px;
	position: absolute;
	margin-left: 47px;
}

.itemrow {
	width: 90%;
	height: 42px;
	margin-top: 20px;
	background: rgba(246, 246, 246, 1);
	border-radius: 2%;
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
}

.input {
	/*opacity: 0;*/
	background: rgba(246, 246, 246, 1);
	height: 42px;
	width: 70%;
	border: 0px;
}

.itemtitle {
	width: 70px;
	height: 40px;
	font-size: 13px;
	margin-left: 19px;
	font-family: PingFangSC;
	font-weight: 600;
	color: rgba(88, 88, 88, 1);
	line-height: 40px;
	text-align: left;
}
</style>
